<template>
	<view>
		<view class="Box">
			<view class="MainCont">
				<image src="https://s.alicdn.com/@sc04/kf/H4d6e7cff86f24e0cb95e22ba0eeb450bj.jpg_300x300.jpg"
					class="ShopImg"></image>
				<h3 class="Huawei">华为mate60</h3>
				<view class="fuhao">￥
					<view class="Pay">11900.00</view>
					<view class="Want">160人想要</view>
				</view>
				<view class="SeInfo">
					<image src="https://gips1.baidu.com/it/u=533589948,183333434&fm=3074&app=3074&f=PNG?w=2048&h=2048"
						class="Seller"></image>
					<h4 class="Name2">159****3049</h4>
					<view class="Visted">2天前来过</view>
				</view>
				<h3 class="SelDes">商家描述</h3>
				<view class="Text">宜家单人小沙发 可拆卸 套子可清晰 宜家单人小沙发 可拆卸 套子可清晰 </view>


			</view>
		</view>
		<view class="Maijia">
			<image src="/static/tab/Share.png" class="fabu">
				<view class="Share">分享</view>
			</image>
			<image src="/static/tab/Like.png" class="xihuan">
				<view class="Like">想要</view>
			</image>
			<view class="fen">
				<view class="Same">卖同款</view>
				<view class="IWant" @click="gobuy">去购买</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {

		}
	},
	methods: {
		gobuy() {
			uni.navigateTo({
				url: "/pages/orders/orders"
			});
		},
	}
}
</script>

<style scoped>
.Maijia {
	overflow: hidden;
	position: fixed;
	bottom: 0;
	padding: 0 30upx;
	box-sizing: border-box;
	width: 100%;
	height: 102upx;
}

.fen {
	float: right;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.Bought {
	width: 400upx;
	height: 90upx;
	line-height: 80upx;
	color: #f5f5f5;
	font-size: 30upx;
	text-align: center;
	background: #067f5b;
	display: inline-block;
	position: relative;
	transform: translateY(-210upx) translateX(290upx);
}

.WanHas {
	width: 260upx;
	height: 90upx;
	border: 2upx solid #b5b5b6;
	position: relative;
	transform: translateY(-120upx);
	font-size: 30upx;
	text-align: center;
}

.LIkeIMG {
	width: 50upx;
	height: 50upx;
	position: relative;
	transform: translateY(18upx);
	margin-right: 5upx;
}

.Wants {
	color: #88888a;
	font-size: 25upx;
	display: inline-block;
	position: relative;
	transform: translateX(112upx);
}

.NotNe {
	height: 26upx;
	font-family: PingFang HK, PingFang HK;
	font-weight: 400;
	font-size: 25upx;
	color: #b9babd;
	line-height: 26upx;
	font-style: normal;
	text-decoration-line: line-through;
	text-transform: none;
	display: inline-block;
	position: relative;
	transform: translateY(-14%);
	margin-left: 10upx;
}

.NowPay {
	display: inline-block;
	margin-top: 20upx;
}

.Qianfuhao {
	float: left;
	margin-top: 20upx;
	font-size: 25upx;
}

.IT1Text {
	font-size: 35upx;
	margin-top: 50upx;
	font-weight: 300;
	width: 310upx;

}

.IT2Text {
	font-size: 35upx;
	margin-top: 60upx;
	font-weight: 300;
	width: 310upx;
}

.turnback {
	font-size: 25upx;
	line-height: 35upx;
	border: 2upx solid #f0f0f0;
	color: #7e7e80;
	float: left;
	position: relative;
	transform: translateY(350upx);
}

.turnback2 {
	font-size: 25upx;
	line-height: 35upx;
	border: 2upx solid #f0f0f0;
	color: #7e7e80;
	float: left;

}

.It1IMG {
	width: 300upx;
	height: 300upx;
	margin-top: 50upx;
	background: #f9f9f9;
	position: relative;
	transform: translateX(-60upx);
}

.It2IMG {
	width: 300upx;
	height: 300upx;
	margin-top: 50upx;
	background: #f9f9f9;
	position: relative;
	transform: translateX(15upx);
}

.ITem2 {
	width: 430upx;
	height: 430upx;
	position: relative;
	transform: translateY(-450upx) translateX(350upx);
}

.ITem1 {
	width: 450upx;
	height: 450upx;
}

.Look {
	font-size: 35upx;
	font-weight: bolder;
	margin-top: 30upx;
}

.IWant {
	width: 150upx;
	height: 80upx;
	border-radius: 50upx;
	margin-left: 10upx;
	background: black;
	text-align: center;
	font-size: 30upx;
	line-height: 80upx;
	color: white;
	float: left;
	position: relative;
}

.Same {
	width: 150upx;
	height: 80upx;
	border-radius: 50upx;
	background: #c3c3c3;
	position: relative;
	text-align: center;
	font-size: 30upx;
	line-height: 80upx;
	float: left;
	margin-right: 20upx;
}

.Like {
	color: #939393;
	font-size: 20upx;
	text-align: center;
	width: 50upx;
	position: relative;
	transform: translateY(-90upx) translateX(75upx);
}

.xihuan {
	width: 60upx;
	height: 60upx;
	position: relative;
	margin-left: 30upx;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	float: left;
}

.Share {
	color: #939393;
	font-size: 20upx;

	width: 50upx;
}

.fabu {
	width: 50upx;
	height: 50upx;
	position: relative;
	top: 50%;
	display: block;
	transform: translateY(-50%);
	float: left;
}

.Text {
	margin-top: 20upx;
	width: 680upx;
}

.SelDes {
	margin-top: 50upx;
	font-size: 40upx;
}

.Visted {
	display: inline-block;
	color: #8c8c8e;
	font-size: 28upx;
	font-weight: 390;
	position: relative;
	transform: translateY(5upx) translateX(-195upx);
}

.Name2 {
	margin-left: 25upx;
	display: inline-block;
	position: relative;
	transform: translateY(-60upx);
	font-size: 35upx;
	font-weight: 390;
	color: #356c9d;
}

.Want {
	color: #989898;
	font-size: 27upx;
	float: right;
	font-weight: 350;
	position: relative;
	transform: translateY(40%);
}

.fuhao {
	display: inline-block;
	font-size: smaller;
	color: #f83c4b;
	margin-top: 30upx;
	margin-left: 20upx;
	font-weight: bold;
	width: 670upx;
}

.Pay {
	display: inline-block;
	color: #f83c4b;
	font-weight: bold;
	font-size: 40upx;

}

.Huawei {
	margin-top: 20upx;
	margin-left: 25upx;
}

.ShopImg {
	width: 700upx;
	height: 700upx;
}

.Pro {
	margin-top: 5upx;
	border-radius: 5upx;
	height: 110upx;
}

.Thing {
	width: 300upx;
	height: 300upx;
	display: block;
	position: relative;
	transform: translateY(-5upx) translateX(-30upx);

}

.Product {
	margin-top: 50upx;
}

.Comedy {
	font-size: 28upx;
	display: inline-block;
}

.Ask {
	width: 35upx;
	height: 35upx;
	display: inline-block;
	position: relative;
	transform: translateX(6upx) translateY(6upx);
}

.RTow {
	width: 30upx;
	height: 30upx;
	float: right;
	position: relative;
	transform: translateY(20upx) translateX(48upx);
}

.RTow2 {
	width: 30upx;
	height: 30upx;
	float: right;
	position: relative;
	transform: translateY(-36upx) translateX(56upx);
}

.Sold2 {
	display: inline-block;
	color: #e4e4e9;
	font-size: 30upx;
	position: relative;
	transform: translateY(-17upx) translateX(-173upx);
	font-weight: lighter;
	font-size: small;
	margin-left: 10upx;
	margin-right: 10upx;
}

.Selling2 {
	display: inline-block;
	color: #8c8c8e;
	font-size: 30upx;
	position: relative;
	transform: translateY(-13upx) translateX(-172upx);
}

.Sold {
	display: inline-block;
	color: #e4e4e9;
	font-size: 30upx;
	position: relative;
	transform: translateY(-13upx) translateX(-70upx);
	font-weight: lighter;
	font-size: small;
	margin-left: 10upx;
	margin-right: 10upx;
}

.Selling {
	display: inline-block;
	color: #8c8c8e;
	font-size: 30upx;
	position: relative;
	transform: translateY(-13upx) translateX(-70upx);
}

.SELLimg {
	width: 40upx;
	height: 40upx;
	border-radius: 50%;
	position: relative;
	transform: translateY(-10upx);
	display: inline-block;
}

.SELstore {
	display: inline-block;
	background: #f5f5f5;
	border-radius: 30upx;
	width: 145upx;
	height: 30upx;
	position: relative;
	transform: translateX(-75upx) translateY(10upx);
}

.SEL {
	display: inline-block;
	font-weight: bold;
	font-size: 25upx;
	background-color: #f5f5f5;
	position: relative;
	transform: translateY(-20upx);
	border-radius: 30upx;
}

.Name {
	margin-left: 25upx;
	display: inline-block;
	position: relative;
	transform: translateY(-60upx);

}

.Seller {
	border-radius: 50%;
	width: 94upx;
	height: 94upx;
	display: inline-block;
}

.MainCont {
	display: flex;
	flex-direction: column;
	padding: 5upx 30upx;
	background: #fff;
	box-sizing: border-box;
}

.SeInfo {
	display: inline-block;
	margin-top: 30upx;
}

.discribe {
	float: left;
}

.Box {
	width: 700upx;
	background: #f8f8f8;
	margin-top: 12upx;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}
</style>
